<template>
    <div>
      <div class="toplineBox">
        <div class="d-flex a-items mb-10">
          <el-select class="mr-10" style="width: 100px;" clearable v-model="downData.is_examine" placeholder="请选择性别" size="small">
            <el-option
                v-for="item in statusTearchList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <component
              v-bind:is="item.propertyType"
              :property.sync="item"
              v-for="(item, index) in getPower"
              :key="index"
              @updateVal="updateVal"
          ></component>

          <downexcel type="classCount" :option="{section_id: downData.section_id,
          class_id:downData.class_id}"></downexcel>
          <!--          </div>-->
          <!--          <div>-->
          <downexcel type="classTearch" :option="{section_id: downData.section_id,
          class_id:downData.class_id,is_examine: downData.is_examine}"></downexcel>
          <!--          </div>-->
          <el-button size="small" @click="refreshFn" plain><i class="el-icon-refresh"></i>重置</el-button>
        </div>
      </div>
      <div>
        <el-col :span="24" class="d-flex a-items mb-10">
          <el-radio-group v-model="editForm.is_examine" @change="tabList" size="small">
            <el-radio-button :label="0">申请中({{ number[0] }})</el-radio-button>
            <el-radio-button :label="1">申请完成</el-radio-button>
          </el-radio-group>
          <div class="ml-30" style="display: flex;align-items: center;">
            <downexcel type="myTearch" :option="{section_id: editForm.section_id,
          class_id:editForm.class_id,user_id:editForm.user_id,is_examine: editForm.is_examine}"></downexcel>
            <p class="ml-10">总{{ cateCount }}类</p>
            <p class="ml-10">共 {{ cateSum?cateSum:0 }} 件</p>
          </div>
        </el-col>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
          <el-table-column
              prop="create_time"
              label="申请时间"
              align="center">
          </el-table-column>
          <el-table-column
              prop="create_time"
              label="领取时间"
              key="1"
              align="center"
              v-if="editForm.is_examine==1">
          </el-table-column>
          <el-table-column
              label="申请班级"
              align="center"
              key="2">
            <template slot-scope="scope">
              {{ scope.row.classes ? scope.row.classes.class_name : '无记录' }}
            </template>
          </el-table-column>
          <el-table-column
              label="申请老师"
              align="center"
              key="3">
            <template slot-scope="scope">
              {{ scope.row.user.realname }}
            </template>
          </el-table-column>
          <el-table-column
              label="申请教具"
              align="center"
              key="4">
            <template slot-scope="scope">
              {{ scope.row.tools.name }}
            </template>
          </el-table-column>
          <el-table-column
              label="缩略图"
              align="center">
            <template slot-scope="scope">
              <ImagePreview :src="scope.row.tools.pic" width="40px" height="40px"></ImagePreview>
            </template>
          </el-table-column>
          <el-table-column
              label="申请数量"
              align="center"
              key="5">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column
              label="状态"
              align="center"
              width="120"
              key="6">
            <template slot-scope="scope">
              <span
                  :class="editForm.is_examine==0?'c-danger':'c-success'">{{ editForm.is_examine == 0 ? '待确认' : '确认领取' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
      <viewImgDialog :privaImgObj="imgsrcCheck" :visible.sync="dialogImgVisible"></viewImgDialog>
    </div>
</template>

<script>
// import download from '@/components/common/download'
import api from '@/utils/api.js'
import {pagination, tableoption} from '@/utils/util.js'
import viewImgDialog from '@/components/dialog/previewImgDialog.vue'
import {mapGetters} from "vuex";

export default {
  components: {
    viewImgDialog,
    // download
  },
  data () {
    return {
      tableStyle: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [],
      number: [0, 0],
      downData:{
        section_id: '',
        class_id: '',
        is_examine: 0
      },
      editForm: {
        name: '', // 名称
        p: '',
        is_examine: 0
      }, // 编辑界面数据
      // 预览
      imgsrcCheck: '',
      dialogImgVisible: false,
      cateCount: '',
      cateSum: '',
      classLsit: [],
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      statusTearchList:[
        {
          value: 0,
          label: '申请中'
        },
        {
          value: 1,
          label: '完成申请'
        }
      ],
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created () {
    this.editForm.user_id = this.userInfo.id
    this.InitFn()
    // 获取当前老师班级
    this.tearchClassFn()
  },
  methods: {
    // 初始化
    InitFn () {
      let url_ = api.tools_apply_index
      if (this.status == 1) {
        url_ = api.tools_apply_disList
      }
      this.editForm.p = this.page.pageindex
      if (this.status === 1) {
        this.editForm.status = this.leadingstatus
      }
      this.$fetch(url_, this.editForm).then((response) => {
        if (response.code === 0) {
          this.cateCount = response.count
          this.cateSum = response.sum
          for (let i in response.list.data) {
            response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
          }
          this.arryList = response.list.data
          this.page.total = response.list.total
          if (!this.editForm.is_examine) {
            this.number[0] = response.list.total
          }
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    tearchClassFn () {
      this.$fetch(this.api.tearch.classLine, {}).then((response) => {
        if (response.code === 0) {
          let status = true
          for (let i in response.list) {
            if (!response.list[i].classes) {
              status = false
            }
          }
          response.list.unshift({id: 0, classes: {class_name: '全部'}})
          this.classLsit = status ? response.list : []
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    tabList () {
      this.arryList = []
      this.page.pageindex = 1
      this.editForm.name = ''
      this.InitFn()
    },
    // 搜索
    searchBtn () {
      this.page.pageindex = 1
      this.InitFn()
    },
    // 分页
    handleSizeChange (val) {
      this.page.pageindex = val
      this.InitFn()
    },
    viewImgDShow (path) {
      this.imgsrcCheck = path
      this.dialogImgVisible = true
    },
    getJson(option){
      return JSON.parse(JSON.stringify(option))
    },
    // 刷新页面
    refreshFn() {
      this.editForm.section_id = ''
      this.editForm.class_id = ''
      this.addtime = []
      let newGetPower = this.getJson(this.getPower)
      newGetPower['section_id'].valueText = '';
      newGetPower['section_id'].child[0].valueText = '';
      this.getPower = newGetPower
      // this.InitFn()
    },
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.downData[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.downData[option.select[i].name] = option.select[i].valueText
          } else {
            this.downData[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
  },
  mounted () {
  }
}
</script>


